/**
 * Created by charlie on 18-1-11.
 */
import React from 'react'
import {View,Text,TouchableOpacity,TextInput,StyleSheet} from 'react-native'
import Colors from '../assets/colors'

export default class Pangitor extends React.Component{
    render(){
        const {mainFunction,namespace,currentPage,totalPage,tableLastPage,tableNextPage,sureJump,change} = this.props;
        let jumpPage = this.props.pangitor.jumpPage
        let pastPage = '<';
        let nextPage = '>';
        let editable = false;
        let prev = false;
        let next =false;
        if(!isNaN(jumpPage) && jumpPage != ''){
            editable = true;
        }else{
            editable = false;
        }
        if(currentPage == 1){
            prev = false
        }else {
            prev = true;
        }
        if(currentPage < totalPage){
            next = true;
        }else {
            next = false;
        }

        return(
            <View>
                <View style={{flexDirection: 'row',justifyContent: 'center',marginTop:15,marginBottom:15}}>
                    <TouchableOpacity onPress={prev?() => {
                        tableLastPage(namespace,currentPage,mainFunction)}:()=>{console.log('')}}>
                        <View style={styles.btnContainer}>
                            <Text style={styles.fenye}>{pastPage}</Text>
                        </View>
                    </TouchableOpacity>
                    <Text style={{marginTop:4,marginLeft:10,marginRight:10,fontSize: 18,color:Colors.navbarBackground}}>
                        <Text style={{color:Colors.navbarBackground}}>{currentPage}</Text>
                        <Text style={{color:Colors.dataBlueNum}}>/</Text>
                        <Text style={{color:Colors.userCenterBackground}}>{totalPage}</Text>
                    </Text>
                    <TouchableOpacity onPress={next?() => {
                        tableNextPage(namespace,currentPage,mainFunction)}:()=>{console.log('')}}>
                        <View style={styles.btnContainer}>
                            <Text style={styles.fenye}>{nextPage}</Text>
                        </View>
                    </TouchableOpacity>
                    <Text style={{marginTop:4,marginLeft:10,fontSize: 18}}>跳转到第</Text>
                    <TextInput
                        style={styles.inputType}
                        underlineColorAndroid='transparent'
                        keyboardType="numeric"
                        value={jumpPage}
                        onChangeText={(val) => change({jumpPage: val})}
                    />
                    <Text style={{marginTop:4,fontSize: 18}}>页</Text>
                    <TouchableOpacity onPress={editable?jumpPage<=totalPage?() => {
                        sureJump(namespace,jumpPage,mainFunction)}:()=>{alert('输入的页码大于总页码，请重新输入！')}:()=>{alert('请正确输入跳转页码！')}}>
                        <View style={styles.btnContainer}>
                            <Text style={styles.surJ}>确定</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop:10,
        paddingLeft: 20,
        paddingRight: 20,
        marginBottom: 30
    },
    text: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 22
    },
    itemText: {
        textAlign: 'center',
        fontSize: 19
    },
    row: {
        height: 48,
        backgroundColor: '#fff'
    },
    btnContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    btn: {
        height: 28,
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 7,
        fontSize: 18
    },
    fenye: {
        height: 35,
        paddingBottom: 2,
        paddingLeft: 18,
        paddingRight: 18,
        alignItems: 'center',
        color: Colors.unselectGrayBg,
        textAlign: 'center',
        borderRadius: 4,
        fontSize: 25,
        borderRadius:10,
        borderWidth:2,
        borderColor:Colors.unselectGrayBg,
    },
    surJ: {
        marginLeft:10,
        height: 35,
        paddingTop:5,
        paddingBottom: 2,
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        color: Colors.unselectGrayBg,
        textAlign: 'center',
        borderRadius: 4,
        fontSize: 18,
        borderRadius:10,
        borderWidth:2,
        borderColor:Colors.unselectGrayBg,
    },
    btnText: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 22
    },
    head: {
        height: 50,
        backgroundColor: Colors.navbarBackground
    },
    title: {flex: 1,
        backgroundColor: '#f6f8fa'
    },
    inputType: {
        textAlign: 'center',
        marginTop: -8,
        fontSize: 18,
        color: Colors.navbarBackground,
    }
});
